<template>
  <el-upload
    size="tiny"
    ref="upload"
    :action="uploadUrl"
    :accept="acceptFileType"
    :multiple="false"
    :headers="headers"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-error="submitUploadError"
    :on-success="submitSuccess"
    :data="uploadParams"
    :file-list="fileList"
    :auto-upload="autoUpload"
    :limit="fileLimit"
    :before-upload="beforeUpload"
    :on-exceed="handleExceed">
    <el-button round slot="trigger" size="small" type="primary">{{selectName}}</el-button>
    <!-- <el-form> -->
    <!--专区-->
  <!-- <el-form-item :label="$t('shellAssets.editLabel.shellAssets.source')" :label-width="editformLabelWidth" prop="assetSource">
      <el-select v-model="uploadParams.assetSource">
          <el-option :value="drug.keyId" :key="drug.keyId" :label="drug.speAreaName"
                  v-for="drug in source"></el-option>
      </el-select>
  </el-form-item> -->
  <!--大磁盘路径-->
  <!-- <el-form-item :label="$t('shellAssets.editLabel.shellAssets.diskPath')"  prop="diskPath" :label-width="editformLabelWidth">
      <el-select v-model="uploadParams.diskPath">
        <el-option :value="item.code" :key="item.code" :label="item.name" v-for="item in diskPathData"></el-option>
      </el-select>
  </el-form-item> -->
    <!-- </el-form> -->
    <el-button round v-if="showFlag" style="margin-left: 10px;"  size="small" type="success" @click="submitUpload('ImportBtnText')">{{uploadBtn}}</el-button>
    <div slot="tip" class="el-upload__tip">只能上传{{fileTypeText}}文件</div>
  </el-upload>
  
</template>

<script>
import comBaseVue from '../../baseViewModel';
import diskPathData from './diskPath.json';

export default {
  name: 'UploadFile',

  /**
     uploadUrl: String, //上传文件路径 - 必需
     acceptFileType: String, // 接受的文件类型 - 可选 默认.xlsx类型
     uploadParams: Object, // 上传参数 - 可选 默认为空
     fileList: Array, // 文件列表 - 可选 默认为空
     autoUpload: Boolean, // 是否开启自动上传 可选 默认关闭
     fileLimit: Number, // 上传文件数量的最大值 可选 默认 1
     selectName: String, // 选取文件的按钮名称 可选 默认为：选取文件
     uploadBtn: String, // 上传文件的按钮名称 可选 默认为：提交
     fileTypeText: String, // 上传文件类型的提示语 可选 默认为 .xlsx
     submitSuccess: Function // 上传成功后的回调函数 可选
   */
  props: {
    source: null,
    menuCode: {
      type: String,
      required: true
    },
    uploadUrl: {
      type: String,
      required: true
    },
    acceptFileType: {
      type: String,
      default: '.xlsx'
    },
    uploadParams: {
      type: Object,
      default: function () {
        return {};
      }
    },
    fileList: {
      type: Array,
      default: function () {
        return [];
      }
    },
    autoUpload: {
      type: Boolean,
      default: false
    },
    showFlag: {
      type: Boolean,
      default: true
    },
    fileLimit: {
      type: Number,
      default: 1
    },
    selectName: {
      type: String,
      default: '选取文件'
    },
    uploadBtn: {
      type: String,
      default: '提交'
    },
    fileTypeText: {
      type: String,
      default: '.xlsx'
    },
    submitSuccess: {
      type: Function,
      default: this.defaultSubmitSuccess
    }
  },
   data() {
    return {
    currentResCode: "",
    editformLabelWidth: '120px',
    diskPathData: diskPathData,//大磁盘路径选项

    assetSource: "",
    diskPath: ""
    }},
  computed: {
    headers: function headers () {
      return {
        'Authorization': 'Bearer ' + this.$cookies.get(this.$appRuntime.cookiesSetting.name).tokenCode,
        'X-AOHO-UserId': this.$cookies.get(this.$appRuntime.cookiesSetting.name).keyID,
        'Accept-Language': this.$cookies.get(this.$appRuntime.cookiesSetting.name).language,
        'App-Type': this.$cookies.get(this.$appRuntime.cookiesSetting.name).appType,
        // 'Authorization': 'Bearer ' + this.$cookies.get(this.$appRuntime.cookiesSetting.token)['access_token'],
        // 'X-AOHO-UserId': this.$cookies.get(this.$appRuntime.cookiesSetting.token)['X-AOHO-UserId']
        // xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // xmlhttp.setRequestHeader('Authorization', 'Bearer ' + Vue.prototype.$cookies.get(configObject.cookiesSetting.name).tokenCode);
        // xmlhttp.setRequestHeader('X-AOHO-UserId', Vue.prototype.$cookies.get(configObject.cookiesSetting.name).keyID);
        // xmlhttp.setRequestHeader('Accept-Language', Vue.prototype.$cookies.get(configObject.cookiesSetting.name).language);
      };
    },
    message: function () {
      return 'childText';
    }
  },
  methods: {
    // 上传前校验
    beforeUpload (file) {
      // const isLt2M = file.size / 1024 / 1024 < 50; // 这里做文件大小限制
      // if (!isLt2M) {
      //   this.$message({
      //     message: '上传文件大小不能超过 50MB!',
      //     type: 'warning'
      //   });
      //   return false;
      // }
      // console.log('file.size==>', file.size);
      return true;
    },
    // 上传文件
    submitUpload: function submitUpload (rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      if (this.isExistResourceCode(this)) {
                this.headers['X-AOHO-Resource'] = this.menuCode + ',' + this.currentResCode;
              }
      if (!this.$refs.upload.uploadFiles.length || this.$refs.upload.uploadFiles.length <= 0) {
        this.$message.warning('您未选择上传文件');
        return false;
      }
      this.$refs.upload.submit(rescode);
    },
    defaultSubmitSuccess: function submitUploadSuccess (response, file, fileList,rescode) {
      if (response.code === 'SUCCESS') {
        this.$message.success('导入成功');
      } else {
        this.$message.error(response.msg);
      }
      this.$refs.upload.clearFiles(); // 清空上传文件列表
    },
    submitUploadError: function submitUploadError (err, file, fileList) {
      let info = JSON.parse(err.message);
      this.$message.error(file.name + ' 导入失败，' + ' 状态码：' + info.status + ' 异常信息：' + info.msg);
      this.$refs.upload.clearFiles(); // 清空上传文件列表
    },
    // 移除文件
    handleRemove: function handleRemove (file, fileList) {
      this.$message.success('移除成功！');
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview: function handlePreview (file) {
    },
    // 文件超出个数限制时的钩子
    handleExceed: function handleExceed (files, fileList) {
      this.$message('上传文件数量超过限制');
    }
  },
  mounted: function mounted() {
    console.log('=====>', this.source);
  }
}
</script>

<style>
.el-button--success:hover{
  color:#5daf34;
}
</style>
